<template>
  <div>
    <el-row class="wc">
      <span><el-button type="primary" @click="addZjb()" round>增加一个人</el-button></span>
      <span
        ><el-input
          placeholder="请输入查询的id号或者姓名"
          v-model="input"
          class="srk"
        ></el-input
      ></span>
      <span
        ><el-button class="el" icon="el-icon-search" @click="selectOne()" circle></el-button
      ></span>
    </el-row>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="zjbId" label="ID号" width="80"></el-table-column>
      <el-table-column
        prop="zjbName"
        label="专家姓名"
        width="180"
      ></el-table-column>
      <el-table-column prop="zjbPos" label="职位"></el-table-column>
      <el-table-column prop="zjbImg" label="头像"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <!-- 分割线 -->
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
     <!--closed代表动画结束后调用 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="successVisible"
      width="18%"
      @closed="refr()" 
    >
      <el-button
        type="success"
        icon="el-icon-check"
        circle
      ></el-button>
      <h2 style="color: green">删除成功</h2>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      successVisible:false,
      input: "",
      tableData: [
        {
          zjbId: "",
          zjbName: "",
          zjbPos: "",
          zjbImg: "",
        }
      ],
    };
  },
  created() {
    const _this = this;
    this.axios({
      method: "get",
      url: _this.baseUrl()+"queryZjb",
    }).then(function (resp) {
      console.log(resp.data);
      console.log(_this.tableData);
      _this.tableData = resp.data;
    });
  },
  methods: {
    //跳转添加页面
    addZjb() {
      this.$router.push("/main/addZjb");
    },
    handleEdit(index, row) {
      console.log(index, row.cybId);
      // 跳转带参数,由于是push,只能用name当路由区域,路由里面设置, 除了push还有其他二种,根据地址等...
      this.$router.push({ name: "editZjb", params: { Id: row.zjbId } });
    },
    handleDelete(index, row) {
      console.log(index, row);
      const _this = this;
    this.axios({
      method: "get",
      // 公共变量baseUrl() 已经定义在main.js.用于修改后端端口
      url: _this.baseUrl() + "delZjb/"+row.zjbId,
    }).then(function (resp) {
      console.log(resp.data);
      _this.successVisible=true
    });
    },
    //刷新页面 (删除成功后,给与提示信息,提示动画结束后调用)
    refr(){
      location.reload()
    },
    // 单个查询
    selectOne(){
      console.log(this.input);
      const _this = this;
      this.axios({
      method: "get",
      // 公共变量baseUrl() 已经定义在main.js.用于修改后端端口
      url: _this.baseUrl() + "queryZjbName/"+_this.input,
    }).then(function (resp) {
      console.log(resp.data);
      _this.tableData = resp.data;//el-table数据的前后交互 必须保证前后端pojo类名字一样
    });
      this.input=""
    }
  },
};
</script>

<style lang="less" scoped>
.wc {
  span {
    width: 300px;
    float: left;
  }
  span:first-child {
    width: 200px;
  }
  span:last-child {
    width: 80px;
  }
}
</style>